<template>
  <div class="class_tree clearfix">

    <van-row gutter="20" :active-key="navActive" style="margin-top: 20px;" >
      <van-col span="8" v-for="(item, i) in list" :key="i" :title="item.name" @click="classClick(item.id, item.name)" style="text-align: center;">
        <div @click="classClick(item.id, item.name)">
          <img v-lazy="item.thumb" :alt="item.name" style="width: 70px;height: 70px;" >
          <div>{{item.name}}</div>
        </div>

      </van-col>

    </van-row>

    <!--<van-badge-group :active-key="navActive" class="left_tree">-->
      <!--<van-badge v-for="(item, i) in list" :key="i" :title="item.name" @click="navclick(i)">-->
      <!--</van-badge>-->
    <!--</van-badge-group>-->
    <!--<div class="class_tree_content">-->
      <!--<div class="class_tree_items_wrap clearfix">-->
        <!--<div style="float: unset;">-->
          <!--<van-button class="class_btn" @click="classClick(list[navActive].id, list[navActive].name)">{{list[navActive].name}}</van-button>-->
        <!--</div>-->
        <!--<div @click="classClick(item.id, item.name)" v-for="item in goods" :key="item.id">-->
          <!--<div class="class_tree_item_img">-->
            <!--<img v-lazy="item.thumb" :alt="item.name" height="70px">-->
          <!--</div>-->
          <!--<div class="class_tree_item_name">{{item.name}}</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
  import { Badge, BadgeGroup, Row, Col } from 'vant';
  export default{
    name: "class-tree",

    model: {
      prop: 'activeIndex'
    },

    props: {
      activeIndex: {
        type: Number,
        default: 0
      },
      list: Array
    },

    data(){
      let navActive = this.activeIndex >= this.list.length ? 0 : this.activeIndex;
      return {
        navActive
      }
    },

    computed: {
      goods(){
        const list = this.list;
        const	navActive = this.navActive;
        return (list && list.length) ? list[navActive].children : [];
      }
    },

    methods: {
      allClick(){
        this.$emit("all-click");
      },
      navclick(i){
        console.log('i就是'+i);
        this.navActive = i;
        this.$emit("nav-click", i);
        const navItem = this.list[this.navActive];
        if (!navItem.children || navItem.children.length === 0) {
          this.classClick(navItem.id, navItem.name);
        }
        //console.log(this.goods);
        //console.log(navItem);


      },
      classClick(id, name){
        this.$emit("class-click", id, name);
      },
    },

    components: {
      [BadgeGroup.name]: BadgeGroup,
      [Badge.name]: Badge,
      [Row.name]: Row,
      [Col.name]: Col
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/mixin";
  .class_tree{
    position: relative;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%;
    box-sizing: border-box;
    margin-bottom: 42px;
    display: flex;
  }
  .class_tree_content{
    flex: 2;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  .class_tree_all{
    text-align: right;
    padding-right: 10px;
    height: 40px;
    line-height: 40px;
    color: $font-color-gray;
    font-size: $font-size-small;
  }
  .van-icon-arrow{
    font-size: $font-size-small;
  }
  .class_tree_items_wrap{
    padding: 10px;
    margin-right: -3%;
    text-align: center;
  >div{
     float: left;
     padding: 0 5px 0 5px;
     box-sizing: border-box;
   // width: 50%;
     margin-bottom: 20px;
   }
  img{
    max-width: 100%;
  }

  .class_tree_item_img{
    display: inline-block;
    max-width: 100%;
    width: 70px;
    height: 70px;
  }
  .class_tree_item_name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  }
  }
  .class_btn {
    width: 100%;
    background-color: $green;
    color: white;
  }
</style>
